<!-- 发布活动 -->

<template>
  <view class="publish-page">
    <view class="form-item">
      <text class="label">活动标题</text>
      <input 
        type="text" 
        placeholder="请输入活动标题" 
        v-model="form.title"
        class="input"
      >
    </view>
    <view class="form-item">
      <text class="label">活动地点</text>
      <input 
        type="text" 
        placeholder="请输入活动地点" 
        v-model="form.location"
        class="input"
      >
    </view>
    <view class="form-item">
      <text class="label">活动时间</text>
      <input 
        type="text" 
        placeholder="请选择活动时间" 
        v-model="form.date"
        class="input"
        @click="openDatePicker"
      >
    </view>
    <view class="form-item">
      <text class="label">活动图片</text>
      <view class="upload-area" @click="chooseImage">
        <image 
          src="/static/icons/upload.png" 
          mode="widthFix" 
          class="upload-icon"
          v-if="!form.image"
        ></image>
        <image 
          :src="form.image" 
          mode="widthFix" 
          class="upload-img"
          v-else
        ></image>
        <text class="upload-text" v-if="!form.image">点击上传图片</text>
      </view>
    </view>
    <view class="form-item form-textarea">
      <text class="label">活动详情</text>
      <textarea 
        placeholder="请输入活动详情..." 
        v-model="form.desc"
        class="textarea"
        auto-height
      ></textarea>
    </view>
    <button class="submit-btn" @click="handleSubmit">发布活动</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '',
        location: '',
        date: '',
        image: '',
        desc: ''
      }
    }
  },
  methods: {
    openDatePicker() {
      uni.dateTimePicker({
        start: '2024-10-01',
        end: '2025-06-30',
        success: (res) => {
          this.form.date = res.value
        }
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: (res) => {
          this.form.image = res.tempFilePaths[0]
        }
      })
    },
    handleSubmit() {
      // 表单验证
      if (!this.form.title) {
        return uni.showToast({ title: '请输入活动标题', icon: 'none' })
      }
      if (!this.form.location) {
        return uni.showToast({ title: '请输入活动地点', icon: 'none' })
      }
      if (!this.form.date) {
        return uni.showToast({ title: '请选择活动时间', icon: 'none' })
      }
      // 模拟提交
      uni.showLoading({ title: '发布中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '发布成功' })
        setTimeout(() => {
          uni.navigateBack() // 返回上一页
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style scoped>
.publish-page {
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.form-item {
  display: flex;
  padding: 25rpx 20rpx;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}
.label {
  width: 160rpx;
  font-size: 28rpx;
  color: var(--text-primary);
}
.input {
  flex: 1;
  font-size: 28rpx;
  padding: 10rpx 0;
}
.upload-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;
  border: 2rpx dashed var(--border-color);
  border-radius: var(--radius);
}
.upload-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 15rpx;
}
.upload-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.upload-text {
  font-size: 26rpx;
  color: #909399;
}
.form-textarea {
  align-items: flex-start;
  padding-top: 30rpx;
}
.textarea {
  flex: 1;
  font-size: 28rpx;
  min-height: 200rpx;
  line-height: 1.6;
}
.submit-btn {
  width: 90%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: var(--primary);
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin: 40rpx auto 0;
}
.submit-btn:active {
  background-color: #3a8ee6;
}
</style>